<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/fore/foreHeader.jsp" %>
<style>
.mainDiv{
width:1470px;
margin:55px auto;
height:1300px;
}

.leftDiv{
width:14%;
height:800px;
float:left;
}
.leftSonDiv{
margin:6px 13px 0px 8px;
padding:10px 0px;
border-bottom:solid 1px #E4E4E4;
line-height:25px;
}
.leftSonCaDiv{
margin:6px 13px 0px 8px;
padding:10px 0px;
border-bottom:solid 1px #E4E4E4;
line-height:25px;

}
.rightDiv{
width:86%;
height:800px;
float:left;
}
 font.font-title{
 font-weight:bold;
 font-size:27px;
 }
 font.fontTitleSon{
 font-weight:bold;
 }
 span.fontCategory{
 margin-right:15px;
 font-size:12px;
 line-height:22px;
 cursor:pointer;
 onfucus:false;
 }
 .fontCategorySelect{
 color:#1A9EFF;
 font-weight:bold;
 }
 .sortbtn button{
 width:86px;height:26px;margin-left:15px;
 }

</style>
<%@include file="foreNav.jsp" %>
<!-- 主体页面 -->
<div class="mainDiv">
<!-- 左侧分类页 -->
<div class="leftDiv">
<p><font id="mainTypeId" class='font-title' color="#1A9EFF" load="${mainType.id}">${mainType.descri}</font></p>
<div class="leftSonDiv">
	<p><font class="fontTitleSon">分类</font></p>
	<c:forEach items="${mainTypes}" var="mainType">
	<a href="listCategoryPage?id=${mainType.id}"><span load="${mainType.id}" class='fontCategory'>${mainType.descri}</span></a>
	</c:forEach>
</div>

<div class="leftSonCaDiv">
<p><font class="fontTitleSon" id="otherTypeId" <c:if test="${!empty otherType}">load="${otherType.id}"</c:if>>类型</font></p>
	<c:if test="${empty otherType}">
	<span  class='fontCategory fontCategorySelect' load="-1">全部</span>
	</c:if>
	<c:if test="${!empty otherType}">
	<span  class='fontCategory' load="-1">全部</span>
	</c:if>
	<c:forEach items="${otherTypes}" var="otherType">
	<span load="${otherType.id}" class='fontCategory'>${otherType.descri}</span>
	</c:forEach>
</div>



</div>
<!-- 右侧影片列表+排序按钮列 -->
<div class="rightDiv" id="rightDiv">




</div>
</div>

<%@include file="../include/fore/foreFooter.jsp" %> 
<script>
$(function(){
	//对主分类进行高亮操作
	var mainTypeId = $("#mainTypeId").attr("load");
	$(".leftSonDiv span[load='"+mainTypeId+"']").addClass("fontCategorySelect");
	//对类型进行高亮操作
	var otherTypeId = $("#otherTypeId").attr("load");
	if(otherTypeId!=null && otherTypeId!=""){
		$(".leftSonCaDiv span[load='"+otherTypeId+"']").addClass("fontCategorySelect");
	}
	//加载右侧页面
	loadTvCategory();
});


//类型的点击操作
$(".leftSonCaDiv span").click(function(){
	initOtherType();
	$(this).addClass("fontCategorySelect");
	$("#otherTypeId").attr("load",$(this).attr("load"));
	loadTvCategory();
});



//初始化类型点击操作
function initOtherType(){
	$(".leftSonCaDiv span").removeClass("fontCategorySelect");
}

function loadTvCategory(){
	var mainTypeId = $("#mainTypeId").attr("load");
	var otherTypeId = $("#otherTypeId").attr("load");
	if(typeof(otherTypeId)=='undefined'){
		otherTypeId = -1;
	}
	$("#rightDiv").load("loadTvCategoryPage?mainTypeId="+mainTypeId+"&otherTypeId="+otherTypeId+"");
}
</script>
